<template>
    <el-dialog :title="title" v-model="drawer" width="800px" :append-to-body="true" @close="close" :destroy-on-close="true">
        <el-form :model="form" :rules="rules" size="small" label-width="150px" ref="ruleRefForm" class="refForm">
            <el-form-item label="名称:" prop="name">
                <el-input v-model="form.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <!-- <el-form-item label="请关联商品"  >
					   <el-tag class="spec-tag" v-for="(item, index) in form.knowledgeArticleSkuRelations" :key="item.skuId" closable
					   	size="small" style="margin-right:10px;height: 25px;" effect="light"
					   	@close="delSpu(index)">{{item.skuName}}</el-tag>
						<el-button type="primary" @click="selectShopList">关联商品</el-button>
			</el-form-item> -->	
            <el-form-item label="状态:" prop="type">
                <el-radio-group v-model="form.state">
                    <el-radio :label="0">关闭</el-radio>
                    <el-radio :label="1">发布</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备注:" >
                <el-input v-model="form.descs" type="textarea" />
            </el-form-item>
            <el-form-item label="需求问题:" v-if="title=='新增需求表'">
                <el-transfer ref="transferRef" v-model="leftValue" style="text-align: left; display: inline-block" :titles="['题目', '已选择题目']"
                    :format="{noChecked: '${total}',hasChecked: '${checked}/${total}',}" :props="{key: 'id',label: 'name',}" :data="data" >
                </el-transfer>                
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" size="small" @click="submitForm(ruleRefForm)">保存</el-button>
                <el-button size="small" @click="resetForm(ruleRefForm)">取消</el-button>
            </span>
        </template>
    </el-dialog>


  <!--   <select-shop v-model:dialogDrawer="dialogShopVisible" title="关联商品" :is-batch="true"
        @onSelectSubmit="selectShopSubmit"></select-shop> -->

</template>

<script>
import {
    computed,
    reactive,
    toRefs,
    ref,
    nextTick,
    onMounted
} from 'vue'
import {
    ElMessage
} from 'element-plus'
import { create, update } from '/@/api/qn/paper'
// import SelectShop from './SelectShop.vue'
import Editor from '/@/components/editor/index.vue'
import { getList as getSelectQuestionList,savePaperQuestions} from '/@/api/qn/question'
export default {
    name: 'ArticleDetail',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        defaultForm: {
            type: Object,
            default() {
                return {}
            }
        },
        title: {
            type: String,
            default: '新增'
        },
    },
    components: {
        // SelectShop,
        Editor
    },
    emits: ['onDetailSubmit', 'update:dialogDrawer'],
    setup(props, context) {
        const { dialogDrawer, defaultForm, title} = toRefs(props)
        const ruleRefForm = ref()
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        let form = computed({
            get: () => defaultForm.value,
            set: val => {
                context.emit('update:defaultForm', val)
            }
        })
        const state = reactive({
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            rules: {
                name: [{
                    required: true,
                    message: '请输入名称',
                    trigger: 'blur'
                }]
            },
            dialogShopVisible: false,
            dialogQuestionVisible: false,
            leftValue: [],
            data: [],
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
        }
        const submitForm = async (formEl) => {
            if (!formEl) return
            await formEl.validate((valid) => {
                if (valid) {
                    let data = form.value
                    if (data.id != null && data.id != '') {
                        update(data).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("修改成功");
                                context.emit('onDetailSubmit', true)
                            } else {
                                ElMessage.error("修改失败");
                            }
                        })
                    }
                    // 新增
                    else {
                        create(data).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("添加成功");
                                if (state.leftValue.length > 0) {
                                    let result = []
                                    for (let id of state.leftValue) {
                                        for (let q of state.data) {
                                            if (id == q.id) {
                                                q.paperId = res.data.id
                                                result.push(q)
                                            }
                                        }
                                    }
                                    savePaperQuestions(result).then(res=>{
                                        state.dialogQuestionVisible = false
                                    })

                                }
                                context.emit('onDetailSubmit', true)
                            } else {
                                ElMessage.error("添加失败");
                            }
                        })

                    }
                }
            })

        }
        const resetForm = (formEl) => {
            if (!formEl) return
            context.emit('update:dialogDrawer', false)
            formEl.resetFields()
        }


        // 关联商品
        const selectShopList = () => {
            state.dialogShopVisible = true
        }
        const selectShopSubmit = (data) => {
            let v = []
            for (let d of data) {
                v.push({ skuId: d.id, skuName: d.spuName })
            }
            state.dialogShopVisible = false
            form.value.knowledgeArticleSkuRelations = v
        }
        //移除商品
        const delSpu = (index) => {
            form.value.knowledgeArticleSkuRelations.splice(index, 1)
        }
        // 选择题目
        const confirmSelect = () => {
			if (state.leftValue.length > 0) {
				let result = []
				for (let id of state.leftValue) {
					for (let q of state.data) {
						if (id == q.id) {
							q.paperId = defaultForm.value.id
							result.push(q)
						}
					}
				}
				savePaperQuestions(result).then(res=>{
					getList()
					state.dialogQuestionVisible = false
				})

			} else {
				ElMessage({
					type: 'error',
					message: '请选择题目',
				})
			}
		}

        onMounted(() => {
            getSelectQuestionList({ paperId: '0' }).then(res => {
                state.data = res.data
            })
        })

        return {
            drawer,
            form,
            title,
            submitForm,
            resetForm,
            close,
            ruleRefForm,
            selectShopList,
            selectShopSubmit,
            delSpu,
            ...toRefs(state)
        }
    }

}
</script>

<style>

</style>
